<template>
    <div>
        
        <header-bar :text="title" :left="left"></header-bar>
        <div class="rule">
            <div class="rule-content">
                <div class="rule-header">
                    <span style="margin-left:12px;font-weight: 600;" ><span v-if="typeText">{{typeText}}充值</span></span>
                    <span style="color:#888888;font-size:14px;" @click="changebi()">切换币种</span>
                </div>
                <div class="rule-con-info">
                    <div style="text-align: center;    border-bottom: 1px solid #D8D8D8;margin-bottom:12px;">
                        <p style="margin-top:22px;color:rgba(188,188,188,1);margin-bottom:28px;">非{{typeText}}充值将会导致资产流失</p>
                        <img v-show="payimg" :src='payimg' style="width:155px; height:155px;margin-bottom:28px;" alt="">
                        <!-- <div style="width:155px; height:155px;">
                            <img v-show="payimg" :src='payimg' style="width:155px; height:155px;margin-bottom:28px;" alt="">
                        </div> -->
                        
                    </div>
                    <div class="info-content">
                        <p class="address">{{payaddr}}</p>
                        <p class="copy"  v-clipboard:copy="payaddr"
                            v-clipboard:success="onCopy"
                            v-clipboard:error="onError">复制地址</p>
                    </div>
                </div>
            </div>
            <div class="sub" @click="postmoney">确认充币</div>
            <mt-popup
                v-model="popupVisible"
                :closeOnClickModal="closeStatus"
                >
                <div class="m_fade">
                <div class="mf_h">选择充币类型</div>
                    <ul>
                        <li v-for="(item,index) in list" :key="index" @click="handLi(index)">{{item.coinType}}</li>
                    </ul>
                </div>
            </mt-popup>
            <Code :flag="flag" @close="close" @changePwd='changePwd' @ok="ok" ref="code"></Code>
        </div>
    </div>
</template>

<script>
import headerBar from './main/header';
import Code from './main/code'
import {  Popup, Toast, MessageBox } from "mint-ui";
import outUrl from '../api1/otherurl.js'
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
    data(){
        return {
            popupVisible:false,
            typeText:"",
            list:["BTC","EOS","ETH"],
            payaddr:"3143136654dsf464df6sdf143sd1fs3df 1s3df1s3df13jfiejfihg3898hgiisjflfjl",
            title: "充币",
            left: {
                status: true
            },
            right:{
                status: true,
                icon:"iconfont icon-share1",
            },
            payimg:"",
            flag:false,
            pwd:"",
            addrList:[],
            activeIndex:"",
            closeStatus:false
        }
    },
    components:{
        headerBar,
        Code
    },
    computed: {
        ...mapState(["pageInfo"])
    },
    methods:{
        postmoney(){
            if (this.pageInfo.userinfo.status == 1) {
                MessageBox.confirm("您还没有认证身份，去认证？").then(action => {
                this.$router.push({ path: "/certification?status=1" });
                });
            } else if (this.pageInfo.userinfo.status == 3) {
                MessageBox.confirm("您的身份正在认证中，去查看？").then(action => {
                 this.$router.push({ path: "/certification?status=3" });
                });
            }
            if (this.pageInfo.userinfo.statusPay == 1) {
                this.password = [];
                MessageBox.confirm("您还没有交易密码，去设置交易密码？").then(
                action => {
                    this.$router.push({ path: "/pay?phone=" + this.pageInfo.userinfo.mobilephone });
                }
                );
            }
            // console.log(this.pageInfo.userinfo.status,this.pageInfo.userinfo.statusPay,3333333333333333333333332)
            if (this.pageInfo.userinfo.statusPay == 2 && this.pageInfo.userinfo.status == 2) {
                let status = false;
                if(this.addrList.length > 0){
                    this.addrList.forEach((item,index) => {
                        if(item.coinType == this.typeText){
                            this.activeIndex = index;
                            status = true;
                            return false;
                        }
                    })
                }
                if(status){
                    this.flag = true;
                }else{
                    Toast({
                        message: "请添加对应的地址",
                        position: "bottom",
                        duration: 5000
                    });
                }
            }
        },
        ok(){
            let parm = {
                id:this.pageInfo.userinfo.id,
                coinType:this.typeText,
                paymentAddress:this.addrList[this.activeIndex].address,
                receiveAddress:this.payaddr,
                payPwd:this.pwd.join('')
            }
            this.$ajaxPost("recharge",parm).then(res => {
                this.$refs.code.password = [];
                if (res.code == 200) {
                    this.flag = false;
                    MessageBox({
                    title: "提交成功！",
                    message:
                        "需大约10分钟完成转账，您可以去账单列表查看转账记录及状态"
                    });
                    this.$router.back();
                } else {
                    Toast({
                    message: res.msg,
                    position: "bottom",
                    duration: 5000
                    });
                }
            });
        },
        close(){
            this.flag = false;
        },
        changePwd(pwd){
            this.pwd = pwd;
        },
        onCopy: function(e) {
            Toast({
                message: "复制成功",
                position: "bottom",
                duration: 5000
            });
        },
        onError: function(e) {
            Toast({
                message: "复制失败",
                position: "bottom",
                duration: 5000
            });
        },
        changebi(){
            this.popupVisible = true;
        },
        handLi(index){
            this.typeText = this.list[index].coinType;
            this.popupVisible = false;
            this.payimg = outUrl.payurl +'/'+  this.list[index].qrcode;
            this.payaddr = this.list[index].address;
            this.closeStatus = true;
        },
        rightClick(){

        },
        initAddress(){
            this.$ajaxGet("sysAddrs",{}).then(res => {
                // console.log(res);
                this.list = res.data;
               for (let i = 0; i < res.data.length; i++) {
                    if (res.data[i].coinType == this.popup) {
                        this.payimg = outUrl.payurl +'/'+ res.data[i].qrcode;
                        this.payaddr = res.data[i].address;
                    }
                }
                this.initImg();
            });
        },
        initImg(){
            for (let i = 0; i < this.list.length; i++) {
                    if (this.list[i].coinType == this.$route.query.iconType) {
                    this.payimg = outUrl.payurl +'/'+ this.list[i].qrcode;
                    this.payaddr = this.list[i].address;
                }
            }
        },
        initUseraddress(){
            this.$ajaxGet("addressList", {
                id: this.pageInfo.userinfo.id
            }).then(res => {
                this.addrList = res.data;
            });
        }
    },
    mounted(){
        this.$store.dispatch('getUserInfo')
        if(this.$route.query.iconType){
            this.typeText = this.$route.query.iconType;
            this.closeStatus = true;
        }else{
            this.popupVisible = true;
        }
    },
    created(){
        this.initUseraddress();
        this.initAddress();
        
    },
    watch:{
        popupVisible(now){
            
        }
    }
}
</script>

<style scoped>
.address{
    text-align: center;
    font-size:14px;
    font-family:PingFangSC-Regular;
    color:rgba(53,53,53,1);
    line-height: 27px;
    margin-bottom: 22px;
}
.copy{
    text-align: center;
    font-size:16px;
    font-family:PingFangSC-Regular;
    color:rgba(247,169,92,1);
}
.rule{
    padding: 50px 0;
    position: absolute;
    width: 100%;
    min-height: 100%;
    background: #F7A95C;
}
.rule-content{
    width: 90%;
    margin: 0 auto;
    padding: 25px 0;
    box-sizing: border-box;
    background: #fff;
    border-radius: 4px;
    margin-bottom: 50px;
}
.rule-header{
    height: 57px;
    width: calc(100% - 16px);
    border-bottom: 1px solid #D8D8D8;
    text-align: center;
    line-height: 57px;
    font-size: 18px;
    font-weight: 600px;
    color: #353535;
    margin: auto;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}
.rule-con-info{
    padding: 15px 18px;
    color: #666666;
}
.sub{
    width:90%;
    height:44px;
    background:rgba(255,255,255,1);
    border-radius:4px;
    text-align: center;
    line-height: 44px;
    color: #F7A95C;
    margin: 0 auto;
    background: #fff;
    border-radius: 4px;
}
ul,
li {
    list-style: none;
}

.m_fade {
    /* width: 200px; */
    color: #888888;
    box-sizing: border-box;
}

.m_fade .mf_h {
    padding: 0 20px;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-bottom: 1px solid #ececec;
    text-align: center;
    color: #353535;
}

.mint-popup {
    border-radius: 4px;
    overflow: hidden;
}

.m_fade li {
    text-align: center;
    width: 280px;
    height: 40px;
    padding: 0 20px;
    line-height: 40px;
    border-bottom: 1px solid #ececec;
    font-size: 16px;
    font-weight: bold;
}
</style>
